<template>
    <div class="query">
        <!--       数据展示的查询组件 -->
        <!-- 查询组件-->
        <input type="text" placeholder="输入文件名称" v-model="filename">
        <a-range-picker
                :placeholder="['开始时间', '结束时间']"
                format="YYYY-MM-DD"
                @change="onChange"
                style="width: 224px;margin-left: 16px;font-size: 14px"
                v-model="filetime"
        />
        <a-select
                show-search
                placeholder="请输入文件类型"
                option-filter-prop="children"
                style="width: 200px"
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="handleChange"
                notFoundContent="请输入正确的文件类型"
                class="chose"
                v-model="filetype"
        >
            <a-select-option value=".pptx">
                .pptx
            </a-select-option>
            <a-select-option value=".pdf">
                .pdf
            </a-select-option>
            <a-select-option value=".docx">
                .docx
            </a-select-option>
            <a-select-option value=".mp3">
                .mp3
            </a-select-option>
            <a-select-option value=".mp4">
                .mp4
            </a-select-option>
            <a-select-option value=".png">
                .png
            </a-select-option>
            <a-select-option value=".jpg">
                .jpg
            </a-select-option>
            <a-select-option value=".doc">
                .doc
            </a-select-option>

        </a-select>
        <button @click="search">查询</button>
        <button @click="chong">重置</button>
    </div>
</template>

<script>
    import moment from 'moment';
    import {selectALl} from "../../api/api";

    export default {
        name: "query",
        data() {
            return {
                dateFormat: 'YYYY/MM/DD',
                monthFormat: 'YYYY/MM',
                filename:"",
                filetime:[],
                filetype:"",
                starttime:"",
                endtime:"",
                type:''
            };
        },
        created() {
            selectALl(7,1).then(res=>{
                console.log(res)
               this.$store.commit("changeDatumList",res.page.list)
                this.$store.commit("changeTotal",res.page.total)
            })
        },
        methods: {
            moment,
            onChange(dates, dateStrings) {
                console.log('From: ', dates[0], ', to: ', dates[1]);
                console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
                this.starttime=dateStrings[0];
                this.endtime=dateStrings[1]
            },
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            handleBlur() {
                // console.log('blur');
            },
            handleFocus() {
                // console.log('focus');
            },
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 查询
            search(){
                if (this.filetype ===".pptx"||this.filetype ===".PPTX"){
                    this.type ='1'

                }else if(this.filetype ===".docx"||this.filetype ===".DOCX"){
                    this.type = '2'
                }else if (this.filetype ===".MP3"||this.filetype ===".mp3"){
                    this.type ='3'
                }else if(this.filetype ===".MP4"||this.filetype ===".mp4"){
                    this.type = '4'
                }else if(this.filetype ===".PDF"||this.filetype ===".pdf"){
                    this.type = '5'
                }else if(this.filetype ===".PNG"||this.filetype ===".png"){
                    this.type = '6'
                }else if(this.filetype ===".JPG"||this.filetype ===".jpg"){
                    this.type = '7'
                }else if(this.filetype ===".DOC"||this.filetype ===".doc"){
                    this.type = '8'
                }
                console.log(this.type)
                let obj  = {
                    "fileType":this.type,
                    "name":this.filename,
                    "startTime":this.starttime,
                    "endTime":this.endtime
                }
                this.$store.commit("changeObj",obj)
                selectALl(this.$store.state.pageSize,this.$store.state.pageNum,'',this.type,this.filename,this.starttime,this.endtime).then(res=>{
                    this.$store.commit("changeDatumList",res.page.list)
                    this.$store.commit("changeTotal",res.page.total)
                })

            },
            // 重置
            chong(){
                console.log("充值")
                this.starttime = '';
                this.endtime ='';
                this.filename="";
                this.filetype="";
                let obj  = {
                    "fileType":'',
                    "name":this.filename,
                    "startTime":this.starttime,
                    "endTime":this.endtime
                }
                this.$store.commit("changeObj",obj)
                this.filetime=[]
                selectALl(7,1,'','','','','').then(res=>{
                    this.$store.commit("changeDatumList",res.page.list)
                    this.$store.commit("changeTotal",res.page.total)
                })
            }
        },
    }
</script>

<style scoped lang="less">
    * {
        box-sizing: border-box;
    }

    input {
        padding-left: 12px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.25);
        outline: none;
    }

    .query {
        width: 1088px;
        margin: 0 auto;

        input:nth-of-type(1) {
            width: 214px;
            height: 32px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid rgba(0, 0, 0, 0.15);
        }

        .chose {
            width: 214px;
            height: 32px;
            background: #FFFFFF;
            border-radius: 4px;
            /*border: 1px solid rgba(0, 0, 0, 0.15);*/
            margin-left: 24px;
        }

        button:nth-of-type(1) {
            width: 65px;
            height: 32px;
            background: #1890FF;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            border: none;
            margin-left: 24px;
            outline: none;
        }

        button:nth-of-type(2) {
            width: 65px;
            height: 32px;
            background: #FFFFFF;
            border: 1px solid #D9D9D9;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            margin-left: 24px;
            outline: none;
        }
    }
</style>
